<template>
  <div>
    <Modal
      width="1200"
      v-model="modal"
      title="车辆实时轨迹展示">
      <div id="containerRealTime" :style="{height:offsetheight+'px'}"></div>
    </Modal>
  </div>
</template>

<script>
import img from '../../assets/images/carNew.png'
import { toTmapLatLng } from '@/libs/gpsConvert'
// import { toTmapLatLng } from '@/view/a-map-d/gpsConvert'
export default {
  name: 'aMapD',
  data () {
    return {
      // sj,
      offsetheight: document.documentElement.clientHeight - 300,
      map: null,
      img,
      modal: false
    }
  },
  methods: {
    initMap (e) {
      // console.log('未处理', e)
      // let a = disGps.toTmapLatLng(e.lng, e.lat)
      // console.log('处理', a)
      console.log('未处理', e.lng, e.lat)
      let a = toTmapLatLng(e.lat, e.lng)
      console.log('处理', a)
      this.map = new AMap.Map('containerRealTime', {
        resizeEnable: true,
        center: new AMap.LngLat(a.lng, a.lat),
        // center: [123.412581, 41.805853],
        zoom: 15
      })
      this.createMaker(a)
    },
    createMaker (e) {
      var marker = new AMap.Marker({
        iconLabel: '起', // 文字描述
        position: new AMap.LngLat(e.lng, e.lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        title: '起',
        icon: new AMap.Icon({
          image: img,
          size: new AMap.Size(30, 30),
          imageSize: new AMap.Size(30, 30) })
        // iconStyle: {
        //   src: img,
        //   style: {
        //     width: '20px',
        //     height: '30px',
        //     color: '#f5f5f5'
        //   }
        // }
      })
      this.map.add(marker)
    },
    isSupportCanvas () {
      let elem = document.createElement('canvas')
      return !!(elem.getContext && elem.getContext('2d'))
    },
    init (e) {
      let _this = this
      setTimeout(function () {
        _this.initMap(e)
      }, 2000)
      this.modal = true
    }
  },
  beforeDestroy () {
    this.map && this.map.destroy()
  },
  watch: {
    modal (val) {
      if (!val) {
        this.map && this.map.destroy()
      }
    }
  }
}
</script>

<style scoped>
#containerRealTime {
  padding: 0;
  /*// width: 100%;*/
  /*//height: 400px;*/
}
.input-card .btn {
  margin-right: 1.2rem;
  width: 9rem;
}
.demo-spin-container{
  display: inline-block;
  width: 100%;
  /*//height: 400px;*/
  position: relative;
  /*//border: 1px solid #eee;*/
}
.opt-area-02 {
  display: flex;
  align-items: center;
  flex-direction: column;
  border: 1px solid #abdcff;
  background-color: #f0faff;
  padding: 8px 16px 8px 16px;
  border-radius: 4px;
  margin-bottom: 10px;
}
.input-frame {
  width: 120px;
  margin-right: 10px;
  float: left;
}
.opt-area-02 .left-con {
  font-size: 14px;
  width: 100%;
}

.opt-area-02 .left-con span {
  font-weight: bold;
}
</style>
